<template>
  <div id="App">
    <el-form ref="form" :model="form" :rules="rules" label-width="80px">
      <el-form-item label="权限名称" prop="name">
        <el-input v-model="form.name" />
      </el-form-item>
      <el-form-item label="权限标识" prop="code">
        <el-input v-model="form.code" />
      </el-form-item>
      <el-form-item label="权限描述" prop="description">
        <el-input v-model="form.description" />
      </el-form-item>
      <el-form-item label="权限启用">
        <el-switch
          v-model="form.enVisible"
          active-text="启用"
          active-value="1"
          inactive-text="未启用"
          inactive-value="0"
        />
      </el-form-item>
    </el-form>
    <div style="text-align: right;">
      <el-button @click="$emit('closed')">取消</el-button>
      <el-button type="primary" @click="hSubmit">确定</el-button>
    </div>
  </div>
</template>

<script>
import { addPermission, getPermissionDetail, updatePermission } from '@/api/permisson'
export default {
  name: 'App',
  props: {
    q: {
      type: Object,
      required: true
    },
    isEdit: {
      type: Boolean,
      required: true
    },
    list: {
      type: Array,
      required: true
    }
  },
  data() {
    const validateName = (rule, value, callback) => {
      let nameList = null
      if (this.isEdit) {
        const pid = this.list.find(item => item.id === this.id).pid
        nameList = this.list.filter(item => item.pid === pid && item.id !== this.id).map(({ name }) => name.trim())
      } else {
        nameList = this.list.filter(item => item.id !== this.id).map(({ name }) => name.trim())
      }
      nameList.includes(value) ? callback(new Error(value + '已存在')) : callback()
    }
    const validateCode = (rule, value, callback) => {
      let codeList = null
      if (this.isEdit) {
        codeList = this.list.filter(item => item.id !== this.id).map(({ code }) => code)
      } else {
        codeList = this.list.map(({ code }) => code)
      }
      codeList.includes(value) ? callback(new Error(value + '已存在')) : callback()
    }
    return {
      form: {
        name: '', // 名称
        code: '', // 权限标识
        description: '', // 描述
        enVisible: '0', // 开启
        pid: '', // 添加到哪个节点下
        type: '' // 类型
      },
      rules: {
        name: [{ required: true, message: '请输入权限名称', tirgger: 'blur' },
          { validator: validateName, trigger: 'blur' }],
        code: [{ required: true, message: '请输入权限标识', tirgger: 'blur' },
          { validator: validateCode, trigger: 'blur' }],
        description: [{ required: true, message: '请输入权限描述', tirgger: 'blur' }]
      }
    }
  },
  computed: {
  },
  created() {
    this.loadPermissons()
  },
  methods: {
    async hSubmit() {
      const valid = await this.$refs.form.validate().catch(e => e)
      if (!valid) return
      try {
        let res = null
        if (this.isEdit) {
          res = await updatePermission(this.form)
          // console.log(res)
        } else {
          res = await addPermission({ ...this.form, ...this.q })
          // console.log(res)
        }
        this.$message.success(res.message)
        this.$emit('success')
      } catch (e) {
        // console.log(e)
        this.$message.error(e.message)
      }
    },
    // 数据回填
    async loadPermissons() {
      if (this.isEdit) {
        try {
          const res = await getPermissionDetail(this.q.pid)
          this.form = res.data
        } catch (e) {
          console.log(e)
        }
      }
    }
  }
}
</script>

<style scoped>
</style>
